<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="./font/iconfont.css">
		<script src="font/iconfont.js"></script>
		<link rel="stylesheet" type="text/css" href="./css/neirong.css" />
		<!-- <script src="./js/up-and-down-all.js"></script> -->
		<title></title>
	</head>
	<body>

		<!-- 顶部 -->

		<header id="head">

			<ul>
				<li>
					<span class="iconfont icon-xiangzuo"></span>
				</li>
				<li>
					<span class="iconfont icon-xuanfuchuang"></span>
				</li>
				<li>
					<a href="my1.html">
						<span class="iconfont icon-tv"></span>
					</a>
				</li>

				<li>
					<a href="#">
						<span class="iconfont icon-sandian1"></span>
					</a>
				</li>
			</ul>
			
		</header>
		
		<div id="box">滚动后才显示的固定元素</div>
		
		<!-- 视频播放 -->
		<div class="video">
			<!-- 控制栏controls autoplay自动播放 -->
			<video width="800" height="" controls="controls" autoplay="autoplay">
				<source src="video/Space.webm" type="video/webm">
				</source>
				<source src="video/Space.mp4" type="video/mp4">
				</source>
				<!-- <source src="myvideo.ogv" type="video/ogg"></source> -->

				<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
					<param name="movie" value="myvideo.swf" />
					<param name="flashvars" value="autostart=true&amp;file=myvideo.swf" />
				</object>
				当前浏览器不支持 video直接播放，点击这里下载视频: <a href="myvideo.webm">下载视频</a>
			</video>
		</div>

		<!-- tab标签，弹幕部分 -->
		<div class="jianzhe">
			<div class="tab">
				<!-- tab头 -->
				<div class="tt">
					<div class="wenzi">
						<div class="jj cur">
							<span>简介</span>
						</div>
						<div class="plun">
							<span class="pl">评论</span>
							<span class="nsz">217</span>
						</div>
					</div>
					<div class="search">
						<div class="sousuo-box">
							<div class="biao">
								<form action="">
									<!-- <span class="iconfont icon-sousuo"></span> -->
									<input id="dianwo" type="search" value="" placeholder="点我发弹幕" name="search"
										onfocus="myFunction()" onblur="blurFunction()">
								</form>
							</div>

							<div class="danmo">
								<span class="iconfont icon-tv"></span>
							</div>
						</div>
					</div>
				</div>

				<!-- tab块 -->
				<!-- 简介 -->
				<div class="tc show">
					<!-- up主信息 -->
					<div class="up">
						<div class="toux">
							<span class="iconfont icon-morentouxiang"></span>
						</div>

						<div class="xingxi">
							<li>
								<span class="mz">不凡的阿尔达</span>
							</li>
							<li>
								<span class="xia fs">6.8万</span>
								<span class="xia">粉丝</span>
								<span class="xia">81</span>
								<span class="xia sp">视频</span>
							</li>
						</div>


						<div class="guanzhu">
							<div class="gx">
								<span>&#10010关注</span>
							</div>

						</div>
					</div>

					<!-- 活动 -->

					<div class="activity">
						<div class="huodong">
							<span>活动</span>
						</div>
						<div class="biaoti">
							<span>看完这4部美剧，英语不好算我输</span>
						</div>
						<!-- 图标 -->
						<div class="tubiao">

							<span class="iconfont icon-xiangxia down"></span>
							<span class="iconfont icon-xiangshang2 up"></span>

						</div>

					</div>


					<div class="jieshao show">
						<div class="top">
							<span class="iconfont icon-bofang"></span>
							<span>6600</span>
							<span class="iconfont icon-danmushu"></span>
							<span>2021-11-21</span>
							<span>18:57</span>
							<span class="iconfont icon-RectangleCopy"></span>
							<span>4</span>
							<span>人正在看</span>
						</div>
						<div class="banquan">
							<span>BV1eP1G71</span>
							<span class="iconfont icon-jinzhi"></span>
							<span>未经允许作者授权禁止转载</span>

						</div>
					</div>


					<div class="context-one">
						<div class="view">
							<ul class="xuanfu">
								<li>
									<a href="#">
										<span class="iconfont icon-dianzan_kuai active"></span>
										<p>214</p>
									</a>
								</li>

								<li>
									<a href="#">
										<span class="iconfont icon-unlike-fill"></span>
										<p>不喜欢</p>
									</a>
								</li>


								<li>
									<a href="#">
										<span class="iconfont icon-toubi "></span>
										<p>135</p>
									</a>
								</li>

								<li>
									<a href="#">
										<span class="iconfont icon-guanzhu "></span>
										<p>879</p>
									</a>
								</li>

								<li>
									<a href="#">
										<span class="iconfont icon-zhuanfa "></span>
										<p>20</p>
									</a>
								</li>


								</u>

						</div>


					</div>

					<div class="context-ttwo">

					</div>

				</div>
				<div class="tc">
					<div class="rmpl">
						<li>
							<span>热门评论</span>
						</li>
						<li>
							<span class="iconfont icon-sanhengxian"></span>
							<span>按热度</span>
						</li>
					</div>

					<div class="pplun">
						<!-- <div class="nrong">
							<div class="toux">
								<span class="iconfont icon-morentouxiang"></span>
							</div>

							<div class="xingxi">
								<li>
									<span class="mz">不凡的阿尔达</span>
									<span class="iconfont icon-icon-test10"></span>
									<span class="iconfont icon-UPzhu"></span>
								</li>
								<li>
									<span class="time">11-29</span>
									<p>
										<span class="zhiding">置顶</span>
										强调：我没有说爆炸/友记不好的意思，只是学英语的话会学到很多古早表达，类似于中文的“同志你好吃了吗”这样的表达。希望大家理解～
									</p>

									<span class="iconfont icon-xihuan"></span>
									<span class="szz">96</span>
									<span class="iconfont icon-dislike"></span>
									<span class="iconfont icon-zhuanfa2"></span>
									<span class="iconfont icon-pinglun2"></span>
									<span class="iconfont icon-sandian2"></span>
								</li>


							</div> -->
					</div>

				</div>
			</div>
			<div class="tc">3</div>


		</div>

		</div>
		<!-- 底部 -->


			<div class="search-wrap">
				<!-- 中间块写标准流就行，不设置宽度 -->

				<div class="search">
					<div class="sousuo-box">
						<form action="">
							<span class="iconfont icon-sousuo"></span>
							<input type="search" value="龙的传人2.0" placeholder="" id="search" name="search">
						</form>
					</div>
				</div>
				<div class="search-touxiang">
					<a href="my1.html">
						<span class="iconfont icon-morentouxiang"></span>
					</a>
				</div>

			</div>

	</body>
</html>

<script src="js/tab.js"></script>
<script src="js/shuru.js"></script>
<script src="js/dianzan.js"></script>
<script src="js/activity.js"></script>
<!-- 简介的json -->
<script>
	var json = [{
			link: "#",
			img: "./image/view1.jpg",
			// info: "12集全",
			author: "大狸子切切里",
			play: "26.0万",
			point: "&#8226",
			time: "2021-12-01",
			amountplay: "百万播放",

			title: "价差11倍，居然没差别？！几分钟教会你挑手机壳",

		},
		{
			link: "#",
			img: "./image/view1.jpg",
			// info: "12集全",
			author: "大狸子切切里",
			play: "26.0万",
			point: "&#8226",
			time: "2021-12-01",
			amountplay: "百万播放",

			title: "价差11倍，居然没差别？！几分钟教会你挑手机壳",

		},

		{
			link: "#",
			img: "./image/view1.jpg",
			// info: "12集全",
			author: "大狸子切切里",
			play: "26.0万",
			point: "&#8226",
			time: "2021-12-01",
			amountplay: "百万播放",

			title: "价差11倍，居然没差别？！几分钟教会你挑手机壳",

		},

		{
			link: "#",
			img: "./image/view1.jpg",
			// info: "12集全",
			author: "大狸子切切里",
			play: "26.0万",
			point: "&#8226",
			time: "2021-12-01",
			amountplay: "百万播放",

			title: "价差11倍，居然没差别？！几分钟教会你挑手机壳",

		},

		{
			link: "#",
			img: "./image/view1.jpg",
			// info: "12集全",
			author: "大狸子切切里",
			play: "26.0万",
			point: "&#8226",
			time: "2021-12-01",
			amountplay: "百万播放",

			title: "价差11倍，居然没差别？！几分钟教会你挑手机壳",

		},

		{
			link: "#",
			img: "./image/view1.jpg",
			// info: "12集全",
			author: "大狸子切切里",
			play: "26.0万",
			point: "&#8226",
			time: "2021-12-01",
			amountplay: "百万播放",

			title: "价差11倍，居然没差别？！几分钟教会你挑手机壳",

		},
		{
			link: "#",
			img: "./image/view1.jpg",
			// info: "12集全",
			author: "大狸子切切里",
			play: "26.0万",
			point: "&#8226",
			time: "2021-12-01",
			amountplay: "百万播放",

			title: "价差11倍，居然没差别？！几分钟教会你挑手机壳",

		}

	];





	var jlist = document.querySelector(".context-ttwo");

	json.forEach(function(v, i) {
		var nli = document.createElement("ul"); /* 创建ul元素 */
		nli.innerHTML = `
			
				<a href="${v.link}">
		       <div class="l">
		       	<img src="${v.img}" alt="">
		       </div>
		       <div class="r">
		       	<li>
		       		<p>${v.title}</p>
		       	</li>
		       	<li>
		       		<div class="bof">
		       			<p>${v.amountplay}</p>
		       		</div>
		       	</li>
		       	
		       	<li>
		       		<div class="author">
		       			<span class="iconfont icon-UPzhu"></span>
		       	
		       			<p>${v.author}</p>
		       		</div>
		       	</li>
		       	
		       	
				
				
		       	<li>
		       		<div class="bottom">
		       			<div class="left"></div>
		       			<span class="iconfont icon-bofangshipin"></span>
		       			<p>${v.play}</p>
		       	
		       			<p>${v.point}</p>
		       			<p>${v.time}</p>
		       			<span class="iconfont icon-diandiandianshu"></span>
		       	
		       		</div>
		       	</li>
		       </div>
			   </a>
		        `;
		//es6新的字符串语法，内部可包括引号，包括变量&{}
		jlist.appendChild(nli);
		//在jliat的内部最后增加nli.
	});
</script>

<!-- 评论的置顶json -->
<script>
	var json = [{
		link: "#",
		author: "不凡的阿凡达",
		time: "11-29",
		topone: "置顶",
		number: "95",
		content: "强调：我没有说爆炸/友记不好的意思，只是学英语的话会学到很多古早表达，类似于中文的“同志你好吃了吗”这样的表达。希望大家理解～"
	}, ];
	var topplist = document.querySelector(".pplun");
	json.forEach(function(p, i) {
		var nli = document.createElement("div"); /* 创建ul元素 */
		nli.innerHTML = `
					<div class="nrong">
						<div class="toux">
							<span class="iconfont icon-morentouxiang"></span>
						</div>
					
						<div class="xingxi">
							<li>
								<span class="mz">${p.author}</span>
								<span class="iconfont icon-icon-test10"></span>
								<span class="iconfont icon-UPzhu"></span>
							</li>
							<li>
								<span class="time">${p.time}</span>
									<p>
										<span class="zhiding">${p.topone}</span>
										${p.content}
									</p>
								
								<span class="iconfont icon-xihuan"></span>
								<span class="szz">${p.number}</span>
								<span class="iconfont icon-dislike"></span>
								<span class="iconfont icon-zhuanfa2"></span>
								<span class="iconfont icon-pinglun2"></span>
								<span class="iconfont icon-sandian2"></span>
							</li>
							
					
						</div>
						       `;
		//es6新的字符串语法，内部可包括引号，包括变量&{}
		topplist.appendChild(nli);
		//在jliat的内部最后增加nli.
	});
</script>

<script>
	var json = [{
			link: "#",
			author: "不凡的阿凡达",
			time: "11-29",
			topone: "置顶",
			number: "95",
			content: "强调：我没有说爆炸/友记不好的意思，只是学英语的话会学到很多古早表达，类似于中文的“同志你好吃了吗”这样的表达。希望大家理解～"
		},

		{
			link: "#",
			author: "凡的阿凡达",
			time: "11-29",
			topone: "置顶",
			number: "94",
			content: "1-神烦警探，2-摩登家庭，3-硅谷4-傲骨贤妻，脱口秀艾伦秀，康纳秀，费伦今夜秀"
		},


		{
			link: "#",
			author: "不的阿凡达",
			time: "11-29",
			topone: "置顶",
			number: "93",
			content: "《权利的游戏》几句记忆非常深的句子，Winter is coming. 凛冬将至。The north remembers. 北境永不遗忘。A Lannister always pays his debts. 兰尼斯特有债必偿。You know nothing,Jon Snow. 你什么都不懂，琼恩·雪诺。Valar Morghulis.Valar Dohaeris. 凡人皆有一死，凡人皆需侍奉。The night is dark and full of terrors. 长夜漫漫，处处险恶。Words are wind. 言语就像风。（隔墙有耳)"
		},


		{
			link: "#",
			author: "不凡阿凡达",
			time: "11-29",
			topone: "置顶",
			number: "92",
			content: "看美剧学英语是夸张了 没任何基础的情况下 你能学到几个单词和几句经典对话就不错了  至少听力和词汇量已经到达一定根基的才可能有点效果  0基础的 你让他看10年美剧 听10年美剧英语 他依旧不会有任何英语水平的提高"
		},


		{
			link: "#",
			author: "不凡的阿凡达",
			time: "11-29",
			topone: "置顶",
			number: "91",
			content: "我推荐大家看小猪佩奇，不接受反驳[妙啊]"
		},


		{
			link: "#",
			author: "不凡的凡达",
			time: "11-29",
			topone: "置顶",
			number: "90",
			content: "我是个英语零基础  基础到什么程度   数字一到十只会读   其中七、八、九不会写今年一月份时候背完了1000词汇量  当时看过两遍硅谷  只记得两句[捂脸]  follow me和mother fuck现在已经背完了6000词汇量   考完研之后再去看硅谷  看看会是什么变化"
		},

		{
			link: "#",
			author: "不凡的阿达",
			time: "11-29",
			topone: "置顶",
			number: "80",
			content: "我是个英语零基础  基础到什么程度   数字一到十只会读   其中七、八、九不会写今年一月份时候背完了1000词汇量  当时看过两遍硅谷  只记得两句[捂脸]  follow me和mother fuck现在已经背完了6000词汇量   考完研之后再去看硅谷  看看会是什么变化"
		},

		{
			link: "#",
			author: "不凡的阿凡",
			time: "11-29",
			topone: "置顶",
			number: "88",
			content: "别说4部，就是4百部。每一部看1000遍都没用。不打基础一切都是扯蛋"
		},


		{
			link: "#",
			author: "不凡的阿凡达",
			time: "11-29",
			topone: "置顶",
			number: "87",
			content: "强调：我没有说爆炸/友记不好的意思，只是学英语的话会学到很多古早表达，类似于中文的“同志你好吃了吗”这样的表达。希望大家理解～"
		},


		{
			link: "#",
			author: "不凡的阿凡达",
			time: "11-29",
			topone: "置顶",
			number: "86",
			content: "强调：我没有说爆炸/友记不好的意思，只是学英语的话会学到很多古早表达，类似于中文的“同志你好吃了吗”这样的表达。希望大家理解～"
		},
	];
	var plist = document.querySelector(".pplun");
	json.forEach(function(p, i) {
		var nli = document.createElement("div"); /* 创建ul元素 */
		nli.innerHTML = `
					<div class="nrong">
						<div class="toux">
							<span class="iconfont icon-morentouxiang"></span>
						</div>
					
						<div class="xingxi">
							<li>
								<span class="mz">${p.author}</span>
								<span class="iconfont icon-icon-test10"></span>
								
							</li>
							<li>
								<span class="time">${p.time}</span>
									<p>
										${p.content}
									</p>
								
								<span class="iconfont icon-xihuan"></span>
								<span class="szz">${p.number}</span>
								<span class="iconfont icon-dislike"></span>
								<span class="iconfont icon-zhuanfa2"></span>
								<span class="iconfont icon-pinglun2"></span>
								<span class="iconfont icon-sandian2"></span>
							</li>
							
					
						</div>
						       `;
		//es6新的字符串语法，内部可包括引号，包括变量&{}
		plist.appendChild(nli);
		//在jliat的内部最后增加nli.
	});
</script>
